@import '../bootstrap'

.input-group--select
  .input-group--select__autocomplete
    display: block
    padding-bottom: 1px

  .input-group__append-icon
    transition: .3s $transition.linear-out-slow-in
    position: absolute
    bottom: 0
    width: 32px

  &.input-group--focused
    .input-group--select__autocomplete
      display: inline-block
      width: 30px
      opacity: 1

    .input-group__append-icon
      transform: rotate(-180deg)

  .input-group__input, input
    cursor: pointer
    flex-direction: column

  &.input-group--disabled
    cursor: not-allowed
    pointer-events: none

.input-group--select
  .input-group__selections
    display: flex
    flex-wrap: wrap
    position: relative
    height: 100%

    &__comma
      display: inline-flex
      font-size: 16px
      padding-left: 4px
      padding-top: 16px
      width: 32px

  .menu
    display: inline

  .fade-transition-leave-active
    position: absolute
    left: 0

  &.input-group--autocomplete.input-group--search-focused
    .input-group__selections__comma
      display: none


.input-group
  &.input-group--overflow,
  &.input-group--editable,
  &.input-group--segmented
    padding: 0

    .input-group__selections,
    input
      width: 24px

    // Handle weird transition issue
    .input-group__selections__comma
      top: 0
      left: 0

    .input-group__input
      transition: .3s $transition.swing

    .input-group__input:hover
      background: #fff

    &.input-group--focused
      .input-group__input
        background: #fff
        elevation(8)

    label
      left: 16px !important
      top: 8px !important

    .input-group__details
      &:after
        display: none

    .input-group__input
      padding: 12px 16px

      &:before
        content: ''
        position: absolute
        left: 0
        height: 100%
        width: 1px
        top: 0
        transition: .3s $transition.swing

  &--segmented .input-group__input,
  &--editable .input-group__input:hover,
  &.input-group--focused.input-group--editable .input-group__input
    &:after
      background-color: rgba(0,0,0,0.12)
      content: ''
      position: absolute
      right: 55px
      height: 48px
      top: 0
      width: 1px

.menu__content--select
  // // IE11 Fix for overflow
  .input-group--selection-controls__ripple
    display: none
